<style>
    .layui-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .layui-card {
        background-color: #F0F2F5;
    }

    .layui-fluid .layui-card .layui-card-body {
        padding: 0;
        overflow-y: scroll;
        height: 100%;
    }

    .container {
        max-width: 100%;
        margin: 0 auto;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
    }

    .column {
        flex-basis: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .column1 {
        flex-basis: 100%;
    }

    /* 媒体查询规则 */
    @media screen and (min-width: 1200px) {
        .column2 {
            flex-basis: 50%;
        }
    }

    .layui-table-view .layui-table {
        width: calc(100% - 15px);
    }

    .time-box {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row-reverse;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .timeFreedom {
        box-sizing: border-box;
        width: 270px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #EDEFF4;
        padding: 5px 10px;
        line-height: 38px;
        display: flex;
    }

    .timeFreedom input {
        border-width: 0;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 19px;
    }

    .timeFreedom .layui-icon {
        font-size: 30px;
        cursor: pointer;
    }

    .timeFreedom input {
        width: calc(100% - 30px);
        display: inline-block;
    }

    .timeFreedom input::placeholder {
        font-size: 16px;
    }

    .report-card {
        box-sizing: border-box;
        padding: 20px;
        background: #FFFFFF;
        height: 460px;
        display: flex;
        flex-direction: column;
    }

    .report-card-header {
        display: flex;
        justify-content: space-between;
        height: 22px;
        align-items: center;
        margin-bottom: 10px;
    }

    .report-card-header .report-card-title {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 23px;
        flex: 1;
    }

    .report-card-header .report-card-switch {
        width: 106px;
        height: 24px;
        background: #9AAEBB;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 2px;
        display: flex;
        margin-left: 15px;
    }

    .report-card-switch .switch-item {
        width: 51px;
        height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 20px;
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
        transition: all 300ms;
    }

    .report-card-switch .switch-item.active {
        background-color: #fff;
        color: #9AAEBB;
    }

    .report-card-more {
        margin-left: 15px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    .report-card-main {
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .report-card-table {
        overflow: hidden;
    }

    .report-card-echarts {
        height: 100%;
        width: 100%;
    }

    .report-card-content {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding-right: 10px;
    }

    .listBox1 > .listItem1 {
        display: flex;
        align-items: center;
        margin-top: 18px;
    }

    .listItem1 .listItem1Index {
        width: 26px;
        height: 26px;
        background: #F1F2F6;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
    }

    .listItem1 .listItem1Content {
        flex: 1;
    }

    .listItem1Top {
        display: flex;
        align-items: center;
    }

    .listItem1Name {
        flex: 1;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
    }

    .listItem1Value {
        min-width: 60px;
        max-width: 200px;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        overflow: hidden;
    }

    .listItem1Ratio {
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
    }

    #staging .listItem1Ratio {
        color: #2977FF;
    }

    #scrap .listItem1Ratio {
        color: #F77234;
    }

    .listBox1 .listItem1:first-child .listItem1Ratio {
        color: #F77234;
    }

    .listItem1ProgressBox {
        margin-top: 5px;
        width: 100%;
        overflow: hidden;
        height: 16px;
        background: #EDEFF2;
        border-radius: 102px 102px 102px 102px;
    }

    .listItem1ProgressBar {
        height: 16px;
        background: #2CBB79;
        border-radius: 102px 102px 102px 102px;
    }

    #staging .listItem1ProgressBar {
        background: #2977FF;
    }

    #scrap .listItem1ProgressBar {
        background: #F77234;
    }

    .listBox1 .listItem1:first-child .listItem1ProgressBar {
        background: #F77234;
    }
    div[lay-id="detailsTemplateTable"],
    div[lay-id="detailsListTable"]{
        margin: 5px 0;
    }
    #detailsTemplateTable{
        margin: 0;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="time-box">
                <div class="timeFreedom">
                    <i class="layui-icon layui-icon-date" id="timeIcon"></i>
                    <input type="text" class="layui-input" readonly="true" id="time1" placeholder="请选择起止时间">
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="column column1">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料统计列表（按人）最小单位量</div>
                            </div>
                            <div class="report-card-main report-card-table">
                                <table class="layui-table" id="materialStatisticsTable"
                                       lay-filter="materialStatisticsTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column column2" id="claimNew">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料领新统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="report-card-echarts"></div>
                            </div>
                        </div>
                    </div>
                    <div class="column column2" id="noReturn">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料未归还统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="report-card-content">
                                    <div class="listBox1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column column2" id="staging">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料暂存统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="listBox1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="column column2" id="repairReport">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料报修统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="report-card-echarts"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column column2" id="scrap">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料报废统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="listBox1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="column column2" id="reportLoss">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料报失统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="report-card-echarts"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column column1" id="abnormal">
                        <div class="report-card">
                            <div class="report-card-header">
                                <div class="report-card-title">物料异常统计（按人）</div>
                                <div class="report-card-switch">
                                    <div class="switch-item active">按数量</div>
                                    <div class="switch-item">按金额</div>
                                </div>
                                <div class="report-card-more">
                                    更多<i class="layui-icon layui-icon-right"></i>
                                </div>
                            </div>
                            <div class="report-card-main">
                                <div class="report-card-echarts"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--listBox1模板-->
<script id="listBox1" type="text/html">
    {{#
    var isNullObj = function (_data) {
    if (_data) {
    if (JSON.stringify(_data) == "{}") { return '0%' } else { return _data+"%" }
    }
    return '0%';
    }

    }}
    {{#
    var eleWidth = function(_value,_oneValue){
    return "width:"+(_value/(_oneValue>0?_oneValue:1))*100+"%"
    }
    }}

    {{#  layui.each(d, function(index, item){ }}
    <div class="listItem1">
        <div class="listItem1Index">{{ index+1 }}</div>
        <div class="listItem1Content">
            <div class="listItem1Top">
                <div class="listItem1Name">{{ item.name }}</div>
                <div class="listItem1Value">{{ item.value }}</div>
                <div class="listItem1Ratio">{{ isNullObj(item.percent) }}</div>
            </div>
            <div class="listItem1ProgressBox">
                <div class="listItem1ProgressBar" style="{{ eleWidth(item.value, d[0].value) }}"></div>
            </div>
        </div>
    </div>
    {{#  }); }}
    {{#  if(d.length === 0){ }}
    <h3 style="margin-top: 50px;text-align: center;font-size: 18px">暂无内容~~~</h3>
    {{#  } }}


</script>

<!--table toolbar-->
<script type="text/html" id="materialStatisticsTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
</script>

<!--table弹窗-->
<script type="text/html" id="detailsTemplate">
    <div lay-filter="detailsTemplateForm" style="padding: 0 15px 10px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 30px); overflow-y: scroll">
            <div>
                <table class="layui-table" id="detailsTemplateTable" lay-filter="detailsTemplateTable"></table>
            </div>
            <div class="layui-tab" lay-filter="demo" style="margin-top: 40px">
                <ul class="layui-tab-title">
                    <li class="layui-this">领新</li>
                    <li>暂存</li>
                    <li>报修</li>
                    <li>报废</li>
                    <li>报失</li>
                    <li>未归还</li>
                    <li>异常</li>
                </ul>
                <div class="layui-tab-content" style="padding: 0">
                    <table class="layui-table" id="detailsListTable" lay-filter="detailsListTable"
                           style="margin: 0"></table>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </div>
</script>

<!--数据图表弹窗-->
<script type="text/html" id="allDataChart">
    <form lay-filter="allDataChartForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div class="layui-row table-bor" style="height: calc(100% - 10px);" id="allDataChartFormchartDom"></div>
            <div style="display: none" id="allDataChartTableBox">
                <table class="layui-table" id="allDataChartTable" lay-filter="allDataChartTable"
                       style="display: none"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="allDataChartFormExport">导出数据</button>
        </div>
    </form>
</script>


<!-- js部分 -->
<script src="/admin/assets/libs/echarts/echarts.min.js"></script>
<script src="/admin/assets/libs/echarts/echartsTheme.js"></script>

<script>
    layui.use(['layer', 'element', 'config', 'admin', 'form', 'table', 'laydate'], function () {
        let $ = layui.jquery;
        let {layer, element, config, table, admin, form, laydate, laytpl} = layui;

        form.render('select');

        let configData = {
                claimNew: {
                    id: 'claimNew',
                    title: '物料领新统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialGetNewStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 1,
                    size: 7
                },
                noReturn: {
                    id: 'noReturn',
                    title: '物料未归还统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialNoReturnStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 2,
                    size: 10
                },
                staging: {
                    id: 'staging',
                    title: '物料暂存统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialTemporaryStorageStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 2,
                    size: 10
                },
                repairReport: {
                    id: 'repairReport',
                    title: '物料报修统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialRepairStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 1,
                    size: 7
                },
                scrap: {
                    id: 'scrap',
                    title: '物料报废统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialScrapStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 2,
                    size: 10
                },
                reportLoss: {
                    id: 'reportLoss',
                    title: '物料报失统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialLossStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 1,
                    size: 7
                },
                abnormal: {
                    id: 'abnormal',
                    title: '物料异常统计（按人）',
                    url: 'enterprisecab/bill/admin/materialStatisticsReport/materialAbnormalStatistics',
                    parameter: {
                        type: 0,
                    },
                    data: [],
                    style: 1,
                    size: 20
                },
            },
            headerObj = {startTime: '', endTime: ''};

        let time1 = laydate.render({
            elem: '#time1',
            type: 'date',
            eventElem: '#timeIcon',
            trigger: 'click',
            range: "至",
            done: function (value, date, endDate) {
                if (value) {
                    let timeArray = value.split("至");
                    headerObj.startTime = timeArray[0].trim() + " 00:00:00";
                    headerObj.endTime = timeArray[1].trim() + " 23:59:59";
                } else {
                    headerObj.startTime = '';
                    headerObj.endTime = '';
                }
                insTb.reload({where: headerObj}, 'data');
                getAllReportData(configData);
                form.render('select');
            }
        });

        let insTb = table.render({
            elem: '#materialStatisticsTable',
            url: config.base + 'enterprisecab/bill/admin/materialStatisticsReport/list',
            page: false,
            where: {limit: 999999},
            cellMinWidth: 100,
            height: 360,
            cols: [[
                {type: 'numbers', title: '序号', width: 60}
                , {field: 'name', title: '姓名'}
                , {field: 'departmentName', title: '部门'}
                , {field: 'getNewNum', title: '领新'}
                , {field: 'temporaryStorageNum', title: '暂存'}
                , {field: 'repairNum', title: '报修'}
                , {field: 'scrapNum', title: '报废'}
                , {field: 'lossNum', title: '报失'}
                , {field: 'noReturnNum', title: '未归还'}
                , {field: 'abnormalNum', title: '异常'}
                , {toolbar: '#materialStatisticsTableBar', title: '操作'}
            ]]
        });

        // 工具条点击事件
        table.on('tool(materialStatisticsTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') { //详情
                showDetails(data);
            }
        });

        function showDetails(data) {
            admin.open({
                type: 1,
                area: ['80%', '80%'],
                offset: '65px',
                title: '详情',
                content: $('#detailsTemplate').html(),
                success: function () {
                    let userId = data.userId;
                    let detailsTemplateTb = table.render({
                        elem: '#detailsTemplateTable',
                        data: [data],
                        page: false,
                        where: {limit: 999999},
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'name', title: '姓名'}
                            , {field: 'departmentName', title: '部门'}
                            , {field: 'getNewNum', title: '领新'}
                            , {field: 'temporaryStorageNum', title: '暂存'}
                            , {field: 'repairNum', title: '报修'}
                            , {field: 'scrapNum', title: '报废'}
                            , {field: 'lossNum', title: '报失'}
                            , {field: 'noReturnNum', title: '未归还'}
                            , {field: 'abnormalNum', title: '异常'}
                        ]]
                    });
                    detailsListTbFn(0);

                    element.on('tab(demo)', function (data) {
                        detailsListTbFn(data.index);
                    });

                    function detailsListTbFn(_index) {
                        let whereObj = JSON.parse(JSON.stringify(headerObj)),
                            colsList=[
                                [
                                    {type: 'numbers',title: '序号',fixed: 'left'}
                                    , {field: 'skuName', fixed: 'left', title: '物料名称', width: 160}
                                    , {field: 'skuCode', fixed: 'left', title: '物料编号', width: 160}
                                    , {field: 'skuSpecOld',fixed: 'left', title: '规格码', width: 160}
                                    , {field: 'productBrandName', sort: false, title: '品牌'}
                                    , {field: 'code', sort: false, title: '领新订单编号', width: 160}
                                    , {field: 'businessTypeDesc', sort: false, title: '领新类型', width: 120}
                                    , {field: 'cabCode', sort: false, title: '柜子编号', width: 120}
                                    , {field: 'cabName', title: '柜子名称'}
                                    , {field: 'spaceCode', sort: false, title: '货道编号'}
                                    , {field: 'packName', title: '包装规格'}
                                    , {field: 'quantity', title: '数量(包装计)', width: 130,templet:function (d) {
                                        if(d.quantity<0){
                                            return d.quantity*-1;
                                        }
                                        return  d.quantity;
                                    }}
                                    , {field: 'unitName', title: '包装单位'}
                                    , {field: 'quantityPack', title: '数量(基础单位计)', width: 150 ,templet:function (d) {
                                        if(d.quantityPack<0){
                                            return d.quantityPack*-1;
                                        }
                                        return d.quantityPack;
                                    }}
                                    , {field: 'basicsUnitName', sort: true, title: '基础单位', templet: d=> d.basicsUnitName ? d.basicsUnitName : '无'}
                                    , {field: 'productCategoryName', sort: false, title: '分类'}
                                    , {field: 'productTypeName', sort: false, title: '类型'}
                                    , {field: 'marketPrice', sort: false, title: '单价'}
                                    , {field: 'workOrderCode', sort: false, title: '工单'}
                                    , {field: 'deviceCode', sort: false, title: '机台'}
                                    , {field: 'deviceDepartmentName', sort: false, title: '机台部门'}
                                    , {
                                    field: 'remainingTime', title: '刀具寿命', templet: function (d) {
                                        if (d.lifeUnitDesc == '') {
                                            return '不计寿命';
                                        }
                                        return d.remainingTime + '|' + d.settingTime;
                                    }
                                }
                                    , {field: 'lifeUnitDesc', title: '寿命单位', templet:d=> d.lifeUnitDesc ? d.lifeUnitDesc : '无'}
                                    , {field: 'creatorName', sort: true, title: '领取人', width: 120}
                                    , {field: 'createTime', sort: true, title: '领取时间', width: 160}
                                    , {field: 'departmentName', sort: false, title: '部门'}
                                    , {field: 'costCenter', sort: false, title: '成本中心'}
                                    , {field: 'roleName', sort: false, title: '岗位'}
                                ],
                                [
                                    {type: 'numbers',title: '序号',fixed: 'left'}
                                    ,{field: 'skuName', title: '物料名称', fixed: 'left', width: 160}
                                    ,{field: 'skuCode', title: '物料编号', fixed: 'left', width: 160}
                                    ,{field: 'skuSpecOld', title: '规格码', fixed: 'left', width: 160}
                                    ,{field: 'productBrandName', title: '品牌'}
                                    ,{field: 'code', sort: true, title: '暂存单号', width: 150}
                                    ,{field: 'cabCode', title: '柜子编号', width: 130}
                                    ,{field: 'spaceCode', title: '货位编号'}
                                    ,{field: 'deviceCode', title: '机台'}
                                    , {field: 'departmentName', sort: false, title: '部门'}
                                    , {field: 'costCenter', sort: false, title: '成本中心'}
                                    ,{field: 'packName', title: '包装规格', templet: function (d) {
                                        return d.packName ? d.packName : "无"
                                    }}
                                    ,{field: 'quantity', title: '包装数量', templet: function (d) {
                                        return d.quantity ? Math.abs(d.quantity) : "无"
                                    }}
                                    ,{field: 'unitName', title: '包装单位', templet: function (d) {
                                        return d.unitName ? d.unitName : "无"
                                    }}
                                    ,{field: 'quantityPack', title: '基础数量', templet: function (d) {
                                        return d.quantityPack ? Math.abs(d.quantityPack) : "无"
                                    }}
                                    ,{field: 'basicsUnitName', title: '基础单位', templet: function (d) {
                                        return d.basicsUnitName ? d.basicsUnitName : "无"
                                    }}

                                    ,{field: 'labelCode', title: '刀具条码', width: 130}
                                    ,{field: 'settingTime', title: '标准寿命',templet:d=> d.settingTime ? d.settingTime : '不计寿命' }
                                    ,{field: 'lifeUnitDesc', title: '已使用寿命',
                                    templet:d=>
                                        d.settingTime ? (d.remainingTime ? (d.settingTime - d.remainingTime) : '不计寿命'):'不计寿命'
                                }
                                    ,{field: 'remainingTime', title: '剩余寿命',templet:d=> d.remainingTime ? d.remainingTime : '不计寿命'}

                                    ,{field: 'lifeUnitDesc', title: '寿命单位', templet:d=> d.lifeUnitDesc ? d.lifeUnitDesc : '无'}
                                    ,{field: 'creatorName', sort: true, title: '存刀人', width: 110}
                                    ,{field: 'createTime', sort: true, title: '存入时间', width: 160}
                                ],
                                [
                                    {type: 'numbers', title: '序号', fixed: 'left'}
                                    ,{field: 'skuName', title: '物料名称', fixed: 'left', width: 160}
                                    ,{field: 'skuCode', title: '物料编号', fixed: 'left', width: 160}
                                    ,{field: 'skuSpecOld', title: '规格码', fixed: 'left', width: 160}
                                    ,{field: 'productBrandName', title: '品牌'}
                                    ,{field: 'code', sort: true, title: '报修单号', width: 150}
                                    , {field: 'departmentName', sort: false, title: '部门'}
                                    , {field: 'costCenter', sort: false, title: '成本中心'}
                                    ,{field: 'cabCode', title: '柜子编号', width: 130}
                                    ,{field: 'spaceCode', title: '货位编号'}
                                    ,{field: 'packName', title: '包装规格'}
                                    ,{field: 'quantity', title: '数量(包装计)'}
                                    ,{field: 'unitName', title: '包装单位'}
                                    ,{field: 'quantityPack', title: '数量(基础单位计)'}
                                    ,{field: 'basicsUnitName', title: '基础单位'}
                                    ,{field: 'labelCode', title: '刀具条码', width: 130}
                                    ,{field: 'remainingTime', sort: true, title: '刀具寿命',templet:function (d) {
                                        if(d.lifeUnitDesc==''){
                                            return '不计寿命';
                                        }
                                        return d.remainingTime+'|'+d.settingTime;
                                    }}
                                    ,{field: 'lifeUnitDesc', title: '寿命单位', templet:d=> d.lifeUnitDesc ? d.lifeUnitDesc : '无'}
                                    ,{field: 'deviceCode', sort: true, title: '机台'}
                                    ,{field: 'causeName', title: '报修原因'}
                                    ,{field: 'creatorName', sort: true, title: '报修人', width: 110}
                                    ,{field: 'createTime', sort: true, title: '报修时间', width: 160}
                                ],
                                [
                                    {type: 'numbers', title: '序号', fixed: 'left'}
                                    ,{field: 'skuName', sort: true, title: '物料名称', fixed: 'left', width: 160}
                                    ,{field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                                    ,{field: 'skuSpecOld', sort: true, title: '规格码', fixed: 'left', width: 160}
                                    ,{field: 'productBrandName', sort: true, title: '品牌'}
                                    ,{field: 'code', sort: true, title: '报废编号', width: 160}
                                    , {field: 'departmentName', sort: false, title: '部门'}
                                    , {field: 'costCenter', sort: false, title: '成本中心'}
                                    ,{field: 'cabCode', title: '柜子编号', width: 130}
                                    ,{field: 'spaceCode', title: '货位编号'}
                                    ,{field: 'packName', title: '包装规格'}
                                    ,{field: 'quantity', title: '数量(包装计)'}
                                    ,{field: 'unitName', title: '包装单位'}
                                    ,{field: 'quantityPack', title: '数量(基础单位计)'}
                                    ,{field: 'basicsUnitName', title: '基础单位'}
                                    ,{field: 'deviceCode', sort: true, title: '机台'}
                                    ,{field: 'labelCode', title: '刀具条码', width: 130}
                                    ,{field: 'remainingTime', title: '刀具寿命',templet:function (d) {
                                        if(d.lifeUnitDesc==''){
                                            return '不计寿命';
                                        }
                                        return d.remainingTime+'|'+d.settingTime;
                                    }}
                                    ,{field: 'lifeUnitDesc', title: '寿命单位', templet:d=> d.lifeUnitDesc ? d.lifeUnitDesc : '无'}
                                    ,{field: 'causeName', title: '报废原因'}
                                    ,{field: 'creatorName', sort: true, title: '报废人', width: 110}
                                    ,{field: 'createTime', sort: true, title: '报废时间', width: 160}
                                ],
                                [
                                    {type: 'numbers', title: '序号', fixed: 'left'}
                                    ,{field: 'skuName', title: '物料名称', fixed: 'left', width: 160}
                                    ,{field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                                    ,{field: 'skuSpecOld', title: '规格码', fixed: 'left', width: 160}
                                    ,{field: 'skuPic', title: '图片', templet:d=> d.skuPic?'<img src="'+ d.skuPic +'"/>':'<img src="assets/images/default-icon.png"/>'}
                                    ,{field: 'productBrandName', title: '品牌'}
                                    ,{field: 'code', title: '报失单号', width: 160}
                                    , {field: 'departmentName', sort: false, title: '部门'}
                                    , {field: 'costCenter', sort: false, title: '成本中心'}
                                    ,{field: 'packName', title: '包装规格'}
                                    ,{field: 'quantity', title: '数量(包装计)',templet:d=> d.quantity + d.basicsUnitName, width: 110}
                                    ,{field: 'unitName', title: '包装单位'}
                                    ,{field: 'quantityPack', sort: true, title: '数量(基础单位计)', width: 150}
                                    ,{field: 'basicsUnitName', sort: true, title: '基础单位'}
                                    ,{field: 'marketPrice', title: '市场价'}
                                    ,{field: 'typeDesc', title: '类型'}
                                    ,{field: 'creatorName', sort: true, title: '报失人', width: 110}
                                    ,{field: 'createTime', sort: true, title: '报失时间', width: 160}
                                ],
                                [
                                    {type: 'numbers',title: '序号',fixed: 'left'}
                                    ,{field: 'skuPic', fixed: 'left', width: 110, sort: true, title: '图片',
                                        templet:d=> d.skuPic?'<img src="'+ d.skuPic +'"/>':'<img src="assets/images/default-icon.png"/>'}
                                    ,{field: 'skuName', sort: true, title: '物料名称', fixed: 'left', width: 160}
                                    ,{field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                                    ,{field: 'skuSpecOld', sort: true, title: '规格码', fixed: 'left', width: 160}
                                    ,{field: 'productBrandName', sort: true, title: '品牌'}
                                    ,{field: 'cabCode', title: '柜子编号'}
                                    ,{field: 'packName', title: '包装规格'}
                                    ,{field: 'quantityPack', sort: true, title: '数量(包装计)',templet:function (d) {
                                        if(d.quantityPack<0){
                                            return d.quantityPack*-1;
                                        }
                                        return  d.quantityPack;
                                    }}
                                    ,{field: 'unitName', title: '包装单位'}
                                    ,{field: 'quantity', sort: true, title: '基础数量(在用数)',width: 150}
                                    ,{field: 'basicsUnitName', sort: true, title: '基础单位'}
                                    ,{field: 'deviceCode', sort: true, title: '机台'}
                                    ,{field: 'deviceDepartmentName', sort: true, title: '机台部门'}
                                    ,{field: 'creatorName', sort: true, title: '领用人'}
                                    ,{field: 'departmentName', sort: true, title: '部门'}
                                    ,{field: 'costCenter', sort: true, title: '成本中心'}
                                    ,{field: 'createTime', sort: true, title: '领用时间', width: 160}
                                ],
                                [
                                    {type: 'numbers',title: '序号',fixed: 'left'}
                                    ,{field: 'code', sort: true, title: '盘验编号'}
                                    ,{field: 'cabName', sort: true, title: '柜子名称'}
                                    ,{field: 'cabCode', sort: true, title: '柜子编号'}
                                    ,{field: 'spaceCode', sort: true, title: '货位编号'}
                                    ,{field: 'skuName', sort: true, title: '物料名称'}
                                    ,{field: 'skuCode', sort: true, title: '物料编号'}
                                    ,{field: 'skuSpecOld', sort: true, title: '规格码'}
                                    ,{field: 'quantity', sort: true, title: '数量'}
                                    ,{field: 'businessTypePreDesc', sort: true, title: '盘验前状态'}
                                    ,{field: 'businessTypeDesc', sort: true, title: '盘验后状态'}
                                    ,{field: 'remark', sort: true, title: '异常原因',templet:function (d) {
                                        if(d.remark){
                                            if(d.remark.indexOf(';')==0){
                                                return d.remark.substring(1,d.remark.length);
                                            }
                                            return d.remark;
                                        }
                                        return '';
                                    }}
                                    ,{field: 'creatorName', sort: true, title: '盘验人'}
                                    ,{field: 'createTime', sort: true, title: '盘验时间'}
                                    ,{field: 'status', sort: true, title: '盘验状态',templet: d=> d.status=='created'?'待盘验':'已盘验'}
                                ]
                            ],
                            urls = [
                                'enterprisecab/cabinet/admin/cellInventoryOut/list',
                                'enterprisecab/cabinet/admin/storageTempInventoryIn/list',
                                'enterprisecab/cabinet/admin/storageRepairInventoryIn/list',
                                'enterprisecab/cabinet/admin/storageRecycleInventoryIn/list',
                                'enterprisecab/cabinet/admin/useInventoryLoss/list',
                                'enterprisecab/cabinet/admin/useInventoryUser/list',
                                'enterprisecab/cabinet/admin/checkedErrorResult/list',
                            ],
                            colsIndex = _index || 0;
                        whereObj.creatorId = userId;
                        let detailsListTb = table.render({
                            elem: '#detailsListTable',
                            url: config.base + urls[colsIndex],
                            cellMinWidth: 100,
                            page: true,
                            where: whereObj,
                            limit: 5,
                            limits: [5, 10, 20, 30, 40, 50, 60, 70, 80],
                            cols: [colsList[colsIndex]]
                        });
                    }
                }
            });
        }

        getAllReportData(configData);

        //请求报表数据
        function getAllReportData(_data) {
            for (let _key in _data) {
                admin.req(configData[_key].url, Object.assign({}, headerObj, configData[_key].parameter), res => {
                    if (res.code === 200) {
                        configData[_key].data = res.data;
                    } else {
                        configData[_key].data = [];
                    }
                    initReport(configData[_key]);
                })
            }
        }

        // 初始化报表
        function initReport(_data) {
            $('#' + _data.id).find('.report-card-title').text(_data.title);
            const styleMapping = {
                1: showReportTemplate1,
                2: showReportTemplate2,
            };
            const templateFunction = styleMapping[_data.style];
            if (templateFunction) {
                templateFunction(_data);
            } else {
                // 处理默认情况
            }

        }

        function showReportTemplate1(_obj) {
            let _elem = document.getElementById(_obj.id).querySelector('.report-card-echarts');
            $(_elem).attr('_echarts_instance_', '');
            let colorArray = {
                'claimNew': ['#2CBB79'],
                'repairReport': ['#FFB94D'],
                'reportLoss': ['#2CBB79'],
                'abnormal': ['#2F75FB'],
            }, barBorderRadius = {
                'claimNew': [0, 0, 0, 0],
                'repairReport': [0, 0, 0, 0],
                'reportLoss': [0, 0, 0, 0],
                'abnormal': [0, 0, 0, 0],
            };

            const myChart = echarts.init(_elem);

            let seriesData = [], xAxisData = [], option = {};
            let data = _obj.data.slice(0, _obj.size || 5);
            data.forEach((item, index) => {
                item.ratio = item.percent;
                if (!item.name) {
                    item.name = '未知名称' + index;
                }

                xAxisData.push(item.name);
                seriesData.push(item)
            });

            option = {
                color: colorArray[_obj.id] || ['#2CBB79'],
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                            "<div style='font-size: 16px;color: #333'>" + parms[0].marker + parms[0].data.name + "</div>" +
                            "<div style='display: flex;justify-content: space-between;'><div style='color:" + parms[0].color + ";margin-right: 10px'>值：</div><div style='color:#333;'>" + parms[0].data.value + "</div></div>" +
                            "<div style='display: flex;justify-content: space-between;'><div style='color:" + parms[0].color + ";margin-right: 10px'>占比：</div><div style='color:#333;'>" + isNullObj(parms[0].data.ratio) + "</div></div></div>";
                        return str;
                    }
                },
                grid: {
                    left: '10',
                    right: '10',
                    bottom: '10',
                    top: '20',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        color: '#333333',
                        // rotate: -20,  //旋转
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: (v) => {
                            if (v.length > 8) {
                                v = v.substring(0, 8);
                            }
                            return v;
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#333333',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        barWidth: '20px',
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                fontWeight: '400',
                                color: '#333',
                                position: 'top',
                            }
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: barBorderRadius[_obj.id] || [0, 0, 0, 0],
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        function showReportTemplate2(_obj) {
            let data = _obj.data.slice(0, _obj.size || 10);
            // admin.showLoading('#'+_obj.id);
            laytpl(listBox1.innerHTML).render(data, function (html) {
                document.getElementById(_obj.id).querySelector(".listBox1").innerHTML = html;
            });
            layer.closeAll();
        }

        //数量金额切换
        $('.container .report-card-switch>div').click(function () {
            if (!$(this).hasClass('active')) {
                let obj = {};
                //qua 数量  money金额
                configData[$(this).parents('.column ').attr('id')].parameter.type = $(this).index();

                obj[$(this).parents('.column').attr('id')] = configData[$(this).parents('.column').attr('id')];

                getAllReportData(obj);

                $(this).addClass('active').siblings().removeClass('active');
            }
        });

        // 所有报表点击更多事件
        $('.container .report-card-more').click(function () {
            if (configData[$(this).parents('.column').attr('id')].data.length === 0) {
                layer.msg('暂时没有数据~~~', {icon: 5});
                return false;
            }
            showAllDataChart(configData[$(this).parents('.column').attr('id')])
        });

        // 更多弹窗
        function showAllDataChart(_data) {
            admin.open({
                type: 1,
                area: ['1400px', '700px'],
                offset: '65px',
                title: _data.title,
                content: $('#allDataChart').html(),
                success: function () {
                    const myChart = echarts.init(document.getElementById('allDataChartFormchartDom'));
                    let seriesData = [], seriesData1 = [], seriesData2 = [], yAxisData = [], option, dataZoomObj = '',
                        seriesObjData = [], tooltipObj = {}, colors = ['#01B780'];
                    let colsData = [{field: 'name', title: '名称'}];
                    let data = [..._data.data].reverse();
                    data.forEach(item => {
                        yAxisData.push(item.name);
                        item.ratio = item.percent;
                        seriesData.push(item);
                        if (item.value1) {
                            seriesData1.push(item.value1)
                        }
                        if (item.value2) {
                            seriesData2.push(item.value2)
                        }
                    });
                    if (data[0].ratio) {
                        colsData.push({field: 'ratio', title: '占比'})
                    }

                    if (seriesData2.length > 0) {
                        colsData.push(
                            {field: 'value', title: '暂存'},
                            {field: 'value1', title: '报修'},
                            {field: 'value2', title: '报废'}
                        );
                        seriesObjData.push(
                            {name: '报废', type: 'bar', barWidth: '15', stack: '2', data: seriesData2},
                            {name: '报修', type: 'bar', barWidth: '15', stack: '2', data: seriesData1},
                            {name: '暂存', type: 'bar', barWidth: '15', stack: '2', data: seriesData},
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let htmlStr = '', str = '';
                                parms.reverse().forEach(item => {
                                    htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div>${item.value}</div>
                                       </div>`
                                });
                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                                    "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + "</div>";
                                return str;
                            }
                        };
                        colors = ['#FFB94D', '#F77234', '#2CBB79'];
                    } else if (seriesData1.length > 0) {
                        colsData.push({field: 'value', title: '数量(包装计)'}, {field: 'value1', title: '数量(基础单位计)'});
                        seriesObjData.push(
                            {name: '数量(包装计)', type: 'bar', barWidth: '15', stack: '2', data: seriesData},
                            {name: '数量(基础单位计)', type: 'bar', barWidth: '15', stack: '2', data: seriesData1}
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let htmlStr = '', str = '';
                                parms.forEach(item => {
                                    htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div>${item.value}</div>
                                       </div>`
                                });
                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                                    "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + "</div>";
                                return str;
                            }
                        };
                        colors = ['#2CBB79', '#FFB94D'];
                    } else {
                        colsData.push({field: 'value', title: '数值'});
                        seriesObjData.push(
                            {name: _data.data.title, type: 'bar', barWidth: '15', data: seriesData}
                        );
                        tooltipObj = {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let str = '', code = '';
                                if (parms[0].data.oldSpecCode) {
                                    code = "<div>规格：" + parms[0].data.oldSpecCode + "</div>"
                                } else {
                                    code = ""
                                }

                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;color: #2CBB79'>" +
                                    "<div>数值：" + parms[0].data.value + "</div>" +
                                    "<div>占比：" + isNullObj(parms[0].data.ratio) + "</div>" + code +
                                    "<div>名称：" + parms[0].data.name + "</div></div>";
                                return str;
                            }
                        };
                        colors = ['#01B780'];
                    }

                    if (data[0].oldSpecCode) {
                        colsData.push({field: 'oldSpecCode', title: '物料规格'})
                    }


                    if (seriesData.length > 10) {
                        dataZoomObj = {
                            type: 'slider',
                            startValue: 1,
                            endValue: 10,
                            show: true,
                            right: 0,
                            width: 20,
                            start: 100 - (10 / seriesData.length) * 100,
                            end: 100,
                            yAxisIndex: 0,
                            handleStyle: {color: "#009C5E"},
                            textStyle: {color: "#000"},
                            fillerColor: "rgb(0,181,89,0.3)",
                            borderColor: "rgb(0,181,89,0.3)",
                        }
                    } else {
                        dataZoomObj = ''
                    }

                    option = {
                        color: colors,
                        tooltip: tooltipObj,
                        grid: {
                            left: '30',
                            right: '2%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: yAxisData,
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                                formatter: (v) => {
                                    if (v.length > 10) {
                                        v = v.substring(0, 10) + '...';
                                    }
                                    return v;
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        dataZoom: dataZoomObj,
                        series: seriesObjData
                    };

                    option && myChart.setOption(option, true);


                    let allDataChartTb = table.render({
                        elem: '#allDataChartTable',
                        data: data,
                        cellMinWidth: 100,
                        page: false,
                        cols: [colsData],
                    });

                    if (data.length === 0) {
                        $('#allDataChartFormExport').remove();
                    } else {
                        $('#allDataChartFormExport').click(function () {
                            table.exportFile(allDataChartTb.config.id, [...data].reverse(), 'xls', _data.name)
                        })
                    }

                }
            });

        }

        // 判断是否是 空{}
        function isNullObj(_data) {
            if (_data) {
                if (JSON.stringify(_data) == "{}") {
                    return '0%'
                } else {
                    return _data + "%"
                }
            }
            return '0%';
        }

        //长度限制
        function limitLength(str, length) {
            // 如果字符串的长度小于等于限制的长度，则直接返回原字符串
            if (str.length <= length) {
                return str;
            }
            // 否则，只取前面限制长度的部分字符串，并在结尾加上省略号
            return str.slice(0, length) + '...';
        }
    });
</script>
